<template>
	<view class="w-100">
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="flex-1 mx-2 mt-3">
				<view class="flex-1 report-item mb-3 py-3" v-for="(item, index) in reportList" :key="index">
					<view class="flex-1 pb-2 mx-3 row-ac">
						<vidw class="flex-1 font-s-35">订单编号：{{ item.order_number }}</vidw>
						<view class="iconfont icon-sandian" style="color: #000;" @click="showDrawer('showLeft', item)">
						</view>
					</view>
					<view class="flex-1 row-ac-fw">
						<view class="report-box row-a-j-fc">
							<view class="font-s-2 text-muted">订单金额</view>
							<view class="font-s-4 mt-1">¥{{ item.order_amount }}</view>
						</view>
						<view class="report-box row-a-j-fc">
							<view class="font-s-2 text-muted">付款状态</view>
							<view class="font-s-4 mt-1">{{ item.payment_status == false ? '未付款' : '已付款' }}</view>
						</view>
						<view class="report-box row-a-j-fc">
							<view class="font-s-2 text-muted">订单用户</view>
							<view class="font-s-4 mt-1">{{ item.order_nickname }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">上交金额</view>
							<view class="font-s-4 mt-1">¥{{ item.submission_amount }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">个人利润</view>
							<view class="font-s-4 mt-1">¥{{ item.personal_profit }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">团队销售</view>
							<view class="font-s-4 mt-1">¥{{ item.team_sales }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.order_user !== item.user">
							<view class="font-s-2 text-muted">收款金额</view>
							<view class="font-s-4 mt-1">¥{{ item.received_amount }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.order_user !== item.user">
							<view class="font-s-2 text-muted">上级收款</view>
							<view class="font-s-4 mt-1">{{ item.receive_status | receiveFilter }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.user !== 2">
							<view class="font-s-2 text-muted">上交状态状态</view>
							<view class="font-s-4 mt-1">{{ item.submission_status | submisFilter }}</view>
						</view>
						<view class="report-box row-a-j-fc" v-if="item.shipping_method !== 0">
							<view class="font-s-2 text-muted" >发货方式</view>
							<view class="font-s-4 mt-1" v-if="item.shipping_method == 1">自营</view>
							<view class="font-s-4 mt-1" v-if="item.shipping_method == 2">代发货</view>
						</view>
					</view>
					<view class="flex-1 row-ac mt-3 mx-3">
						<view class="flex-1 font-s-2 text-muted">时间：{{ item.create_time }}</view>
						<view class="collection-box font-s-2 row"
							@click="orderDetails(item)">订单详情</view>
						<view class="collection-box font-s-2 ml-2 row bg-black" v-if="item.receive_status == 2"
							@click="revenuereportPatch(item)">确认收款</view>
					</view>
				</view>
			</view>
		</template>
		<view class="center-popup row" v-if="centerPopup">
			<view class="center-popup-box">
				<view class="flex-1 tips-box row">
					<text class="font-s-4">发货提示</text>
				</view>
				<view class="choice-box flex-1 row-a-j-fc">
					<view class="py-3" v-for="(item,index) in methodList" :key="index" @click="takeMethod(index)">
						<view class="choice-item-box row-ac-sb">
							<view class="font-s-45" :class="methodIndex == index ?'font-w' : ''">{{ item.title }}</view>
							<view class="choice-border" :class="methodIndex == index ?'choice-border-bg' : ''"></view>
						</view>
						<view class="choice-item-box font-s-3 text-muted mt">{{ item.tips }}</view>
					</view>
				</view>
				<view class="click-box flex-1 row">
					<view class="take-clivk row" @click="cancelReceipt">取消</view>
					<view class="take-clivk row ml-5" @click="confirmReceipt">确认收款</view>
				</view>
			</view>
		</view>
		<!-- 左弹出 -->
		<view class="flex-1">
			<uni-drawer ref="showLeft" mode="left" :width="218" @change="change($event,'showLeft')">
				<view class="flex-1" style="height: 100%;">
					<view class="flex-1 row py-3 font-s-2 text-muted"></view>
					<scroll-view scroll-y class="flex-1" style="height: 80%;">
						<view class="flex-1 mx-5 row">总部</view>
						<view class="flex-1 mx-5 row-a-j-fc" v-for="(item, index) in superiorsList" :key="index"
							@click="takePhone(item)">
							<view class="iconfont icon-icon-test mt-6"
								:class="reachId == item.id ? 'font-w text-danger' : ''" style="font-size: 52rpx;">
							</view>
							<view class="row-ac">
								<image :src="item.head_image" class="head-image mr-1 border" mode=""></image>
								<view :class="reachId == item.id ? 'font-s-4 font-w text-danger' : 'font-s-35'">
									{{ item.nickname || item.username }}
								</view>
							</view>
							<view class="font-s-2" :class="reachId == item.id ? 'text-danger' : ''"
								v-if="reachId == item.id">(已收款)</view>

						</view>
						<view class="flex-1 mx-5 row-a-j-fc">
							<view class="iconfont icon-icon-test mt-6"
								:class="reachId == orderInfo.order_user ? 'font-w text-danger' : ''"
								style="font-size: 52rpx;"></view>
							<view class="row-ac mt-1">
								<image :src="orderInfo.order_head_image" class="head-image mr-1 border" mode=""></image>
								<view class="mt-1"
									:class="reachId == orderInfo.order_user ? 'font-s-4 font-w text-danger' : 'font-s-35'">
									{{ orderInfo.order_nickname || orderInfo.order_username }}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="flex-1 row py-3 font-s-2 text-muted">点击用户可以联系对方</view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import {
		revenuereportListUrl,
		revenuereportPatchUrl,
		distributorsDetailUrl,
		userInfoUrl,
		superiorsListUrl,
		subrevenuereportListUrl,
		useridentityDetailUrl,
	} from "@/api/index.js"
	export default {
		data() {
			return {
				loadingState: false,
				centerPopup: false,
				loadingImg: '../../static/img/loading.gif',
				showLeft: false,
				queryInfo: {
					page_size: 10
				},
				reportList: [],
				FormData: {
					receive_status: '',
					shippingMethod: 0

				},
				superiorsQueryInfo: {
					userId: ''
				},
				distributorsDetail: '',
				userInfo: '',
				useridentity: '',
				reachId: 6,
				superiorsList: [],
				orderInfo: {
					order_user: '',
					order_username: '',
					order_nickname: '',
					order_head_image: ''
				},
				methodIndex: 0,
				methodList: [{
						id: 0,
						title: '默认',
						tips: '向上级正常上交货款，由平台发货'
					},
					{
						id: 1,
						title: '自营',
						tips: '由分公司自收货款，自行发货'
					},
					{
						id: 2,
						title: '代发',
						tips: '由分公司自收货款，由平台代发货'
					}
				]
			}
		},
		filters: {
			receiveFilter(status) {
				if (status === 0) {
					return '未收款'
				} else if (status === 1) {
					return '已收款'
				} else if (status === 2) {
					return '收款中'
				}
			},
			submisFilter(status) {
				if (status === 0) {
					return '未上交'
				} else if (status === 1) {
					return '已上交'
				} else if (status === 2) {
					return '上交中'
				}
			},
		},
		onLoad() {
			this.init()
		},
		nNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		created() {
			this.getDistributorsDetail()
			this.getUserInfo()
			this.getUseridentityDetail()
		},
		onReachBottom() {
			this.onReachBottomHandle();
		},
		methods: {
			init() {
				this.getRevenuereportList()
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
				})
			},
			getUseridentityDetail() {
				this.$R.get(useridentityDetailUrl).then(res => {
					this.useridentity = res.data
					console.log('用户身份', this.useridentity.identity);
				})
			},
			getRevenuereportList() {
				this.$R.get(subrevenuereportListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.reportList = res.data.list;
						this.reportTotal = res.data.total;
						this.loadingState = true;
					}
				});
			},
			onReachBottomHandle() {
				// 触底事件
				if (this.reportTotal != this.reportList.length) {
					this.queryInfo.page_size += 10;
					this.getRevenuereportList()
				}
			},
			getDistributorsDetail() {
				this.$R.get(distributorsDetailUrl).then(res => {
					this.distributorsDetail = res.data
				})
			},
			cancelReceipt() {
				this.centerPopup = false
			},
			revenuereportPatch(item) {
				this.FormData.revenueId = item.id
				if (this.useridentity.identity == 5) {
					this.centerPopup = true
				} else {
					if (this.userInfo.id == 2) {
						uni.showModal({
							title: '提示',
							content: '是否已经收到上交款?',
							confirmText: '确认收款',
							success: (res) => { // 使用箭头函数
								if (res.confirm) {
									this.$R.get(revenuereportPatchUrl, this.FormData).then(
										res => {
											uni.showToast({
												title: '收款成功',
												icon: 'none'
											});
											this.getRevenuereportList()
										})
								} else if (res.cancel) {
									console.log('取消');
								}
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '是否已经收到上交款？如已收到' + item.receive_nickname + '的上交款，您确认收款后，您需要向您上级' + this
								.distributorsDetail.leader_nickname + '上交款项，是否确认收款',
							confirmText: '确认收款',
							success: (res) => { // 使用箭头函数
								if (res.confirm) {
									this.$R.get(revenuereportPatchUrl, this.FormData).then(
										res => {
											uni.showToast({
												title: '收款成功',
												icon: 'none'
											});
											this.getRevenuereportList()
										})
								} else if (res.cancel) {
									console.log('取消');
								}
							}
						});
					}
				}
			},
			takeMethod(index) {
				console.log(index);
				this.methodIndex = index
				if (this.methodIndex == 0) {
					this.FormData.shippingMethod = 0
				}
				if (this.methodIndex == 1) {
					this.FormData.shippingMethod = 1
				}
				if (this.methodIndex == 2) {
					this.FormData.shippingMethod = 2
				}
			},
			confirmReceipt() {
				this.$R.get(revenuereportPatchUrl, this.FormData).then(
					res => {
						this.centerPopup = false
						uni.showToast({
							title: '收款成功',
							icon: 'none'
						});
						this.getRevenuereportList()
					})
			},
			takePhone(item) {
				uni.showModal({
					title: '提示',
					content: '是否拨打' + item.nickname + '电话?',
					confirmText: '拨打电话',
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: item.phone
							});
						}
					}
				})
			},
			// 打开窗口
			showDrawer(e, item) {
				this.$refs[e].open()
				this.superiorsQueryInfo.userId = item.order_user
				this.reachId = item.order_superior_user
				this.orderInfo.order_user = item.order_user
				this.orderInfo.order_username = item.order_username
				this.orderInfo.order_nickname = item.order_nickname
				this.orderInfo.order_head_image = item.order_head_image
				this.$R.get(superiorsListUrl, this.superiorsQueryInfo).then(res => {
					if (res.code == 200) {
						this.superiorsList = res.data.list
					}
				})
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
			orderDetails(item){
				uni.navigateTo({
					url: '/pages/order/order-details?orderId=' + item.order
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.report-item {
		background-color: #f5f5f5;

		.report-box {
			width: 33.333%;
			height: 120rpx;
		}

		.collection-box {
			width: 138rpx;
			height: 54rpx;
			border: 1rpx solid #000;
		}
	}

	.head-image {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}

	.center-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 99;

		.center-popup-box {
			width: 620rpx;
			height: 680rpx;
			background-color: #fff;

			.tips-box {
				height: 90rpx;
			}

			.choice-box {
				height: 460rpx;

				.choice-item-box {
					width: 400rpx;

					.choice-border {
						width: 35rpx;
						height: 35rpx;
						border-radius: 50%;
						border: #000 solid 1rpx;
					}

					.choice-border-bg {
						background-color: #000;
					}
				}
			}

			.click-box {
				height: 130rpx;

				.take-clivk {
					width: 180rpx;
					height: 70rpx;
					background-color: #000;
					color: #fff;
				}
			}
		}
	}
</style>